<!DOCTYPE html>
<html lang="zh-CN"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>现代文章分享卡片</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36BFFA',
                        accent: '#7B61FF',
                        neutral: {
                            100: '#F5F7FA',
                            200: '#E4EDF5',
                            300: '#D0D7DE',
                            400: '#9CA3AF',
                            500: '#6B7280',
                            600: '#4B5563',
                            700: '#374151',
                            800: '#1F2937',
                            900: '#111827'
                        }
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 10px 30px -5px rgba(0, 0, 0, 0.1)',
                        'card-hover': '0 20px 40px -5px rgba(0, 0, 0, 0.15)',
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-balance {
                text-wrap: balance;
            }
            .transition-all-300 {
                transition: all 0.3s ease;
            }
            .tag-hover {
                @apply hover:bg-primary hover:text-white hover:-translate-y-1 transition-all duration-300;
            }
            .btn-hover {
                @apply hover:-translate-y-1 hover:shadow-lg transition-all duration-300;
            }
            .card-hover {
                @apply hover:-translate-y-2 hover:shadow-card-hover transition-all duration-500;
            }
        }
    </style>
<style>*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/* ! tailwindcss v3.4.16 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.mx-2{margin-left:0.5rem;margin-right:0.5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.ml-2{margin-left:0.5rem}.ml-4{margin-left:1rem}.mr-1{margin-right:0.25rem}.mr-2{margin-right:0.5rem}.mt-1{margin-top:0.25rem}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.h-10{height:2.5rem}.h-12{height:3rem}.min-h-screen{min-height:100vh}.w-10{width:2.5rem}.w-12{width:3rem}.w-full{width:100%}.max-w-3xl{max-width:48rem}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:0.5rem}.gap-4{gap:1rem}.space-x-3 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.75rem * var(--tw-space-x-reverse));margin-left:calc(0.75rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-4 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.overflow-hidden{overflow:hidden}.text-balance{text-wrap:balance}.rounded-full{border-radius:9999px}.rounded-xl{border-radius:0.75rem}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-neutral-200{--tw-border-opacity:1;border-color:rgb(228 237 245 / var(--tw-border-opacity, 1))}.border-white{--tw-border-opacity:1;border-color:rgb(255 255 255 / var(--tw-border-opacity, 1))}.bg-neutral-100{--tw-bg-opacity:1;background-color:rgb(245 247 250 / var(--tw-bg-opacity, 1))}.bg-primary{--tw-bg-opacity:1;background-color:rgb(22 93 255 / var(--tw-bg-opacity, 1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-white\/20{background-color:rgb(255 255 255 / 0.2)}.bg-gradient-to-br{background-image:linear-gradient(to bottom right, var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}.from-neutral-100{--tw-gradient-from:#F5F7FA var(--tw-gradient-from-position);--tw-gradient-to:rgb(245 247 250 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-primary\/90{--tw-gradient-from:rgb(22 93 255 / 0.9) var(--tw-gradient-from-position);--tw-gradient-to:rgb(22 93 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.to-accent\/90{--tw-gradient-to:rgb(123 97 255 / 0.9) var(--tw-gradient-to-position)}.to-neutral-200{--tw-gradient-to:#E4EDF5 var(--tw-gradient-to-position)}.object-cover{object-fit:cover}.p-4{padding:1rem}.p-6{padding:1.5rem}.px-3{padding-left:0.75rem;padding-right:0.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-1{padding-top:0.25rem;padding-bottom:0.25rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.pb-4{padding-bottom:1rem}.font-inter{font-family:Inter, system-ui, sans-serif}.text-\[clamp\(1\.5rem\2c 3vw\2c 2\.2rem\)\]{font-size:clamp(1.5rem,3vw,2.2rem)}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.leading-relaxed{line-height:1.625}.leading-tight{line-height:1.25}.text-neutral-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-neutral-600{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.text-neutral-700{--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.text-neutral-800{--tw-text-opacity:1;color:rgb(31 41 55 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-white\/80{color:rgb(255 255 255 / 0.8)}.text-yellow-400{--tw-text-opacity:1;color:rgb(250 204 21 / var(--tw-text-opacity, 1))}.shadow-card{--tw-shadow:0 10px 30px -5px rgba(0, 0, 0, 0.1);--tw-shadow-colored:0 10px 30px -5px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-colors{transition-property:color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.text-balance {
                text-wrap: balance;
            }.tag-hover{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms}.tag-hover:hover{--tw-translate-y:-0.25rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-bg-opacity:1;background-color:rgb(22 93 255 / var(--tw-bg-opacity, 1));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.btn-hover{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms}.btn-hover:hover{--tw-translate-y:-0.25rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.card-hover{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:500ms}.card-hover:hover{--tw-translate-y:-0.5rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-shadow:0 20px 40px -5px rgba(0, 0, 0, 0.15);--tw-shadow-colored:0 20px 40px -5px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}
        .hover\:bg-blue-100:hover{--tw-bg-opacity:1;background-color:rgb(219 234 254 / var(--tw-bg-opacity, 1))}
        .hover\:bg-neutral-200:hover{--tw-bg-opacity:1;background-color:rgb(228 237 245 / var(--tw-bg-opacity, 1))}
        .hover\:bg-primary\/90:hover{background-color:rgb(22 93 255 / 0.9)}
        .hover\:text-blue-600:hover{--tw-text-opacity:1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}
        .hover\:text-primary:hover{--tw-text-opacity:1;color:rgb(22 93 255 / var(--tw-text-opacity, 1))}
        .hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}
    </style></head>
<body class="bg-gradient-to-br from-neutral-100 to-neutral-200 min-h-screen flex items-center justify-center p-4 font-inter">
    <div class="article-card w-full max-w-3xl bg-white rounded-xl shadow-card overflow-hidden card-hover">
        <!-- 文章头部信息 -->
        <div class="bg-gradient-to-r from-primary/90 to-accent/90 text-white p-6">
            <div class="flex justify-between items-start">
                <div>
                    <span class="inline-block bg-white/20 text-white px-3 py-1 rounded-full text-sm font-medium mb-4 backdrop-blur-sm">
                        <i class="fa fa-newspaper-o mr-1"></i> 前端技术
                    </span>
                    <h1 class="text-[clamp(1.5rem,3vw,2.2rem)] font-bold leading-tight text-balance">
                        现代Web开发趋势：2023年前端技术深度解析
                    </h1>
                </div>
                
            </div>
        </div>

        <!-- 文章内容区域 -->
        <div class="p-6">
            <!-- 作者信息 -->
            <div class="flex items-center mb-6">
                <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;auto=format&amp;fit=crop&amp;w=200&amp;q=80" alt="张明" class="w-12 h-12 rounded-full border-2 border-white shadow-md object-cover">
                <div class="ml-4">
                    <div class="font-semibold text-neutral-800">张明</div>
                    <div class="text-sm text-neutral-500 flex items-center mt-1">
                        <i class="fa fa-calendar-o mr-1"></i> 2023年11月20日
                        <span class="mx-2">•</span>
                        <i class="fa fa-eye mr-1"></i> 3.8K 浏览
                    </div>
                </div>
            </div>

            <!-- 文章摘要 -->
            <div class="text-neutral-700 leading-relaxed mb-6">
                <p class="mb-4">在快速发展的Web开发领域，2023年见证了多项重大技术进步。React 18的并发特性彻底改变了应用响应能力，Vue 3的组合式API提升了代码组织效率。</p>
                <p>同时，TypeScript的采用率持续攀升，已成为大型项目的标配。WebAssembly的成熟使得在浏览器中运行高性能应用成为可能。</p>
            </div>

            <!-- 标签区域 -->
            <div class="flex flex-wrap gap-2 mb-6">
                <span class="bg-neutral-100 text-neutral-700 px-4 py-2 rounded-full text-sm font-medium tag-hover">
                    <i class="fa fa-code mr-1"></i>前端框架
                </span>
                <span class="bg-neutral-100 text-neutral-700 px-4 py-2 rounded-full text-sm font-medium tag-hover">
                    <i class="fa fa-js mr-1"></i>JavaScript
                </span>
                <span class="bg-neutral-100 text-neutral-700 px-4 py-2 rounded-full text-sm font-medium tag-hover">
                    <i class="fa fa-terminal mr-1"></i>TypeScript
                </span>
                <span class="bg-neutral-100 text-neutral-700 px-4 py-2 rounded-full text-sm font-medium tag-hover">
                    <i class="fa fa-bolt mr-1"></i>Web性能
                </span>
            </div>

            <!-- 阅读时间和互动数据 -->
            <div class="flex flex-wrap items-center justify-between gap-4 mb-6 pb-4 border-b border-neutral-200">
                <div class="flex items-center text-neutral-600">
                    <i class="fa fa-clock-o text-lg mr-2"></i>
                    <span>预计阅读时间: 12分钟</span>
                </div>
                <div class="flex items-center space-x-4">
                    <button class="flex items-center text-neutral-600 hover:text-primary transition-colors">
                        <i class="fa fa-thumbs-up mr-1"></i>
                        <span>128</span>
                    </button>
                    <button class="flex items-center text-neutral-600 hover:text-primary transition-colors">
                        <i class="fa fa-comment-o mr-1"></i>
                        <span>42</span>
                    </button>
                </div>
            </div>

            <!-- 底部操作区 -->
            <div class="flex flex-wrap items-center justify-between gap-4">
                <a href="#" class="bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-full font-medium inline-flex items-center btn-hover">
                    阅读完整文章
                    <i class="fa fa-arrow-right ml-2"></i>
                </a>
                
            </div>
        </div>
    </div>

    <script>
        // 保存文章功能
        const saveBtn = document.querySelector('.save-btn');
        saveBtn.addEventListener('click', function() {
            this.querySelector('i').classList.toggle('fa-bookmark-o');
            this.querySelector('i').classList.toggle('fa-bookmark');
            this.classList.toggle('text-white/80');
            this.classList.toggle('text-yellow-400');
        });

        // 阅读更多按钮效果
        const readMoreBtn = document.querySelector('a.bg-primary');
        readMoreBtn.addEventListener('click', function(e) {
            e.preventDefault();
            const originalText = this.innerHTML;
            this.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 加载中...';
            
            setTimeout(() => {
                this.innerHTML = originalText;
                alert('文章加载完成！在实际应用中，这里将导航到文章详情页。');
            }, 1500);
        });

        // 分享按钮效果
        const shareBtn = document.querySelector('.share-btn');
        shareBtn.addEventListener('click', function() {
            // 创建分享菜单
            const shareMenu = document.createElement('div');
            shareMenu.className = 'fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-lg shadow-xl p-6 z-50 transform transition-all duration-300 opacity-0 scale-95';
            shareMenu.style.width = '300px';
            
            shareMenu.innerHTML = `
                <div class="text-center mb-4">
                    <h3 class="font-bold text-lg text-neutral-800">分享文章</h3>
                    <p class="text-sm text-neutral-500 mt-1">选择分享方式</p>
                </div>
                <div class="grid grid-cols-3 gap-4">
                    <button class="flex flex-col items-center p-3 rounded-lg hover:bg-neutral-100 transition-colors">
                        <i class="fa fa-weixin text-2xl text-green-600"></i>
                        <span class="text-xs mt-2">微信</span>
                    </button>
                    <button class="flex flex-col items-center p-3 rounded-lg hover:bg-neutral-100 transition-colors">
                        <i class="fa fa-weibo text-2xl text-red-500"></i>
                        <span class="text-xs mt-2">微博</span>
                    </button>
                    <button class="flex flex-col items-center p-3 rounded-lg hover:bg-neutral-100 transition-colors">
                        <i class="fa fa-link text-2xl text-neutral-600"></i>
                        <span class="text-xs mt-2">复制链接</span>
                    </button>
                </div>
                <button class="close-btn w-full mt-6 py-2 bg-neutral-100 hover:bg-neutral-200 rounded-lg text-neutral-700 transition-colors">
                    取消
                </button>
            `;
            
            document.body.appendChild(shareMenu);
            
            // 显示分享菜单的动画
            setTimeout(() => {
                shareMenu.classList.remove('opacity-0', 'scale-95');
                shareMenu.classList.add('opacity-100', 'scale-100');
            }, 10);
            
            // 关闭分享菜单
            const closeBtn = shareMenu.querySelector('.close-btn');
            closeBtn.addEventListener('click', function() {
                shareMenu.classList.remove('opacity-100', 'scale-100');
                shareMenu.classList.add('opacity-0', 'scale-95');
                
                setTimeout(() => {
                    document.body.removeChild(shareMenu);
                }, 300);
            });
            
            // 点击外部关闭
            shareMenu.addEventListener('click', function(e) {
                if (e.target === shareMenu) {
                    closeBtn.click();
                }
            });
        });
    </script>
<!-- Code injected by live-server -->
<script>
	// <![CDATA[  <-- For SVG support
	if ('WebSocket' in window) {
		(function () {
			function refreshCSS() {
				var sheets = [].slice.call(document.getElementsByTagName("link"));
				var head = document.getElementsByTagName("head")[0];
				for (var i = 0; i < sheets.length; ++i) {
					var elem = sheets[i];
					var parent = elem.parentElement || head;
					parent.removeChild(elem);
					var rel = elem.rel;
					if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
						var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
						elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
					}
					parent.appendChild(elem);
				}
			}
			var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
			var address = protocol + window.location.host + window.location.pathname + '/ws';
			var socket = new WebSocket(address);
			socket.onmessage = function (msg) {
				if (msg.data == 'reload') window.location.reload();
				else if (msg.data == 'refreshcss') refreshCSS();
			};
			if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
				console.log('Live reload enabled.');
				sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
			}
		})();
	}
	else {
		console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
	}
	// ]]>
</script>

</body></html>